<template>
  <view class="">
    <view class="wrapper">
      <view class="item upload-item remark-item">
        <view class="label">
          <view v-if="true"
                style="color: red; padding-right: 4rpx">*</view>备注：
        </view>
        <u-input v-model="originData.remark"
                 type="textarea"
                 class="my-form-textarea"
                 placeholder="完成情况描述…"
                 :border="false"
                 :auto-height="true"
                 maxlength="400"
                 @focus="handleFocus"
                 @blur="handleBlur" />
      </view>
      <view class="item upload-item">
        <view class="label">图片：</view>
        <view class="upload-img-box">
          <template v-if="originData.imgList.length >= 0">
            <view class="view-upload-item"
                  v-for="(items, indexs) in originData.imgList"
                  :key="items.url">
              <image :src="items.url"
                     @tap.stop="imgPreConfigView(item.configId, indexs)"></image>
              <image src="../../static/cancel.png"
                     class="cancel-btn"
                     @tap.stop="
                      deleteFileConfigFn(item.configId, indexs, 'pics')
                    ">
              </image>
            </view>
          </template>
          <view class="view-upload-btn"
                @tap.stop="uploadImgConfigFn(item.configId)"></view>
        </view>
      </view>
      <view class="item upload-item">
        <view class="label">视频：</view>
        <view class="upload-img-box">
          <template v-if="originData.videoList.length >= 0">
            <view class="view-upload-item"
                  v-for="(items, indexs) in originData.videoList"
                  :key="items.url">
              <video :src="items.url"
                     objectFit="fill"
                     :initial-time="1"
                     controls></video>
              <view class="my-video-bg"
                    @tap.stop="showVideoFn(items.url)"></view>
              <image src="../../static/cancel.png"
                     class="cancel-btn"
                     @tap.stop="
                      deleteFileConfigFn(item.configId, indexs, 'videos')
                    "></image>
            </view>
            
          </template>
          <view
                class="view-upload-btn"
                @tap.stop="uploadVideoConfigFn(item.configId)"
              ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    // 区分活动主题和其他主题
    name: 'commonList',
    popTag: {
      type: Number,
      default: 0
    },
    // uploadImgs: {
    //   type: Array,
    //   default: []
    // },
    // uploadVideos: {
    //   type: Array,
    //   default: []
    // },
    originData: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-information {
    .label {
      color: #666666;
      min-width: 140rpx;
    }
  }

  .item {
    display: flex;
    align-items: center;
    height: 100rpx;
    line-height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    padding: 0 30rpx;
  }

  .upload-item {
    margin-top: 15rpx;
    height: auto;
    align-items: flex-start;

    .label {
      padding-top: 20rpx;
    }
  }

  .remark-item {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
  }

  .label {
    display: flex;
    font-size: 28rpx;
    color: #333;
    min-width: 100rpx;
    font-family: PingFangSC, PingFang SC;
  }

  .item-subtitle + .item-subtitle {
    border-top: 1px solid #f7f7f7;
  }

.upload-img-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .files-wrap {
    position: relative;
    width: 173rpx;
    height: 173rpx;
    overflow: hidden;

    .click-wrap {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 111;
    }
  }
}
.my-video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}
.view-upload-item {
  position: relative;
  width: 173rpx;
  height: 173rpx;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  margin-right: 15rpx;
  margin-top: 20rpx;
  background: #f7f7f7;
}
.view-upload-btn {
  width: 173rpx;
  height: 173rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  position: relative;
  margin-right: 15rpx;
  margin-top: 20rpx;
}

.view-upload-btn::before {
  content: " ";
  display: block;
  width: 60rpx;
  height: 3rpx;
  background: #d8d8d8;
  border-radius: 3rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1.5rpx;
  margin-left: -30rpx;
}

.view-upload-btn::after {
  content: " ";
  display: block;
  width: 3rpx;
  height: 60rpx;
  background: #d8d8d8;
  border-radius: 3rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30rpx;
  margin-left: -1.5rpx;
}
.my-form-textarea {
  height: 246rpx;
  width: 558rpx;
  background-color: #f7f7f7;
  border-radius: 16rpx;
  padding: 15rpx 30rpx !important;
  box-sizing: border-box;
  overflow-y: auto;
  // margin-top: 20rpx;
}
</style>
